<template>
    <div class="top-image fullscreen-top"></div>
<div class="list">
  <div class="item">
    <span class="item-text">核心团队</span>
    <img src="@/assets/images/t-bg.png" alt="" class="item-icon" />
  </div>
</div>
  <PageNav :navList="navList" />
  <TitleBox title="科研团队" subtitle="RESEARCH TEAM" />
  <div class="team-display-container">
    <!-- 核心团队部分 -->
    <section class="team-section">
      <div class="section-title">
        <h2>核心团队</h2>
        <p>CORE TEAM</p>
      </div>
      <el-row :gutter="30" class="team-grid">
        <el-col 
          v-for="(member, index) in coreTeam" 
          :key="index" 
          :xs="24" 
          :sm="12" 
          :md="8" 
          :lg="6"
        >
          <el-card class="member-card" shadow="hover" @click="goToProfile(member)">
            <img :src="member.avatar || defaultAvatar" class="member-avatar" alt="成员头像" />
            <div class="member-info">
              <div class="member-name">{{ member.name }}</div>
              <div class="member-position">{{ member.position }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!-- 委员会部分 -->
    <section class="team-section">
      <div class="section-title">
        <h2>委员会</h2>
        <p>COMMITTEE</p>
      </div>

      <!-- 主任委员 -->
      <div class="committee-category">
        <h3 class="category-title">主任委员</h3>
        <el-row :gutter="30" class="team-grid">
          <el-col 
            v-for="(member, index) in directorMembers" 
            :key="index" 
            :xs="24" 
            :sm="12" 
            :md="8" 
            :lg="6"
          >
            <el-card class="member-card" shadow="hover">
              <img :src="member.avatar || defaultAvatar" class="member-avatar" alt="成员头像" />
              <div class="member-info">
                <div class="member-name">{{ member.name }}</div>
                <div class="member-position">{{ member.position }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 副主任委员 -->
      <div class="committee-category">
        <h3 class="category-title">副主任委员</h3>
        <el-row :gutter="30" class="team-grid">
          <el-col 
            v-for="(member, index) in viceDirectorMembers" 
            :key="index" 
            :xs="24" 
            :sm="12" 
            :md="8" 
            :lg="6"
          >
            <el-card class="member-card" shadow="hover">
              <img :src="member.avatar || defaultAvatar" class="member-avatar" alt="成员头像" />
              <div class="member-info">
                <div class="member-name">{{ member.name }}</div>
                <div class="member-position">{{ member.position }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 普通委员 (已排序) -->
      <div class="committee-category">
        <h3 class="category-title">委员</h3>
        <el-row :gutter="30" class="team-grid">
          <el-col 
            v-for="(member, index) in sortedMembers" 
            :key="index" 
            :xs="24" 
            :sm="12" 
            :md="8" 
            :lg="6"
          >
            <el-card class="member-card" shadow="hover">
              <img :src="member.avatar || defaultAvatar" class="member-avatar" alt="成员头像" />
              <div class="member-info">
                <div class="member-name">{{ member.name }}</div>
                <div class="member-position">{{ member.position }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'   // ✅ ① 导入 useRouter
import { listTeam } from '@/api/teamSys/team.js'
import { listCommittee } from '@/api/committeeSys/committee.js'
import defaultAvatar from '@/assets/images/default.jpg'
import TitleBox from "@/components/common/TitleBox.vue"
import PageNav from "@/components/views/PageNav.vue"

const router = useRouter()  // ✅ ② 初始化 router 实例

// 响应式数据
const coreTeam = ref([])
const committee = ref([])
const loading = ref(false)

const navList = [
  { label: "机构部门", path: "/support/organizationalStructure" },
  { label: "科研团队", path: "/support/talentExpertTeam" },
  { label: "支撑保障", path: "/support/resourceSupport" }
]

// 异步数据获取函数
const fetchTeam = async () => {
  loading.value = true
  try {
    const res = await listTeam({})
    coreTeam.value = res.rows
  } catch (error) {
    console.error("获取核心团队数据失败:", error)
  } finally {
    loading.value = false
  }
}

const fetchCommittee = async () => {
  loading.value = true
  try {
    const res = await listCommittee({})
    committee.value = res.rows
  } catch (error) {
    console.error("获取委员会数据失败:", error)
  } finally {
    loading.value = false
  }
}

// 计算属性
const directorMembers = computed(() =>
  committee.value.filter(m => m.position === '主任委员')
)
const viceDirectorMembers = computed(() =>
  committee.value.filter(m => m.position === '副主任委员')
)
const sortedMembers = computed(() =>
  committee.value
    .filter(m => m.position === '委员')
    .sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN'))
)

// ✅ 点击卡片跳转到个人简介页面
const goToProfile = (member) => {
  router.push({
    path: '/support/memberProfile',
    query: { id: member.id } // 确保 member.id 存在
  })
}

onMounted(() => {
  fetchTeam()
  fetchCommittee()

  
})
</script>


<style scoped>
/* 顶部图片区域 */
.top-image {
  width: 100%;
  height: 260px;
  background-image: url("@/assets/images/support-bg.jpg");
  background-position: center;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 12px rgba(22, 93, 255, 0.2);
}

.list {
  display: flex;
  align-items: center;
  position: relative; /* 确保 ::after 的绝对定位相对于它 */
  z-index: 0; /* 默认最底层 */
}

.list::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px; /* 可根据需要调整对齐方式 */
  width: 100%;
  height: 90px; /* 背景条高度，可调整 */
  background-color: #eae4e4;
  z-index: 0; /* 背景在最底层 */
}

.list .item {
  position: relative; /* 保持原来的布局 */
  display: inline-block;
  margin-top: -30px;
  z-index: 1; /* 图片和文字覆盖灰色背景 */
}

.list .item-icon {
  display: block;
  position: relative;
  z-index: 1; /* 图片在灰色背景上 */
}

.list .item-text {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  z-index: 2; /* 文字在最上层 */
}


.team-display-container {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.team-section {
  margin-bottom: 60px;
}

.section-title {
  margin-bottom: 24px;
  border-left: 4px solid #c8102e;
  padding-left: 12px;
}

.section-title h2 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px 0;
}

.section-title p {
  font-size: 16px;
  color: #999;
  margin: 0;
  text-transform: uppercase;
}

.committee-category {
  margin-bottom: 40px;
}

.category-title {
  font-size: 20px;
  color: #666;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.team-grid {
  margin-top: 16px;
}

.member-card {
  text-align: center;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden; /* 确保头像圆角生效 */
}

.member-avatar {
  width: 100%;
  height: 200px; /* 固定高度，使卡片对齐 */
  object-fit: cover; /* 保证图片不变形，覆盖整个区域 */
  border-bottom: 1px solid #f0f0f0;
}

.member-info {
  padding: 15px;
}

.member-name {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.member-position {
  font-size: 14px;
  color: #666;
}
</style>